<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非遗文化</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .heritage-header {
            background: linear-gradient(135deg, #9C27B0, #673AB7);
            color: white;
            padding: 20px 16px;
            text-align: center;
            border-radius: 0 0 16px 16px;
        }
        .heritage-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .heritage-subtitle {
            opacity: 0.9;
            font-size: 14px;
        }
        .heritage-search {
            margin-top: 16px;
            position: relative;
        }
        .heritage-search input {
            width: 100%;
            padding: 12px 42px;
            border-radius: 24px;
            border: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            font-size: 14px;
        }
        .heritage-search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        .category-tabs {
            display: flex;
            overflow-x: auto;
            padding: 4px 0;
            margin: 16px 0;
            -webkit-overflow-scrolling: touch;
        }
        .category-tab {
            padding: 8px 16px;
            border-radius: 16px;
            background-color: #f1f1f1;
            margin-right: 8px;
            white-space: nowrap;
            font-size: 14px;
        }
        .category-tab.active {
            background-color: #9C27B0;
            color: white;
        }
        .heritage-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 16px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .heritage-image {
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .heritage-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .heritage-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            padding: 16px;
        }
        .heritage-name {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 4px;
        }
        .heritage-type {
            opacity: 0.9;
            font-size: 14px;
        }
        .heritage-content {
            padding: 16px;
        }
        .heritage-description {
            color: #555;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .heritage-highlights {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        .heritage-highlight {
            background-color: #f3e5f5;
            color: #9C27B0;
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 12px;
        }
        .heritage-action {
            display: flex;
            gap: 10px;
        }
        .virtual-tour {
            background: linear-gradient(135deg, #9C27B0, #673AB7);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            flex: 1;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .virtual-tour i {
            margin-right: 8px;
        }
        .featured-section {
            margin-top: 24px;
        }
        .section-title {
            font-weight: bold;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
        }
        .section-title i {
            margin-right: 8px;
            color: #9C27B0;
        }
        .featured-scroll {
            display: flex;
            overflow-x: auto;
            gap: 16px;
            padding: 4px 0;
            -webkit-overflow-scrolling: touch;
        }
        .featured-item {
            min-width: 180px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background-color: white;
        }
        .featured-image {
            height: 120px;
            overflow: hidden;
        }
        .featured-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .featured-info {
            padding: 12px;
        }
        .featured-name {
            font-weight: bold;
            margin-bottom: 4px;
            font-size: 14px;
        }
        .featured-location {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 12px;
        }
        .featured-location i {
            margin-right: 4px;
            color: #9C27B0;
            font-size: 10px;
        }
        .artisan-section {
            margin-top: 24px;
        }
        .artisan-item {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .artisan-avatar {
            width: 70px;
            height: 70px;
            border-radius: 35px;
            overflow: hidden;
            margin-right: 16px;
        }
        .artisan-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .artisan-info {
            flex: 1;
        }
        .artisan-name {
            font-weight: bold;
            margin-bottom: 4px;
        }
        .artisan-craft {
            color: #9C27B0;
            font-size: 14px;
            margin-bottom: 4px;
        }
        .artisan-bio {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }
        .mini-button {
            background-color: #9C27B0;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 8px;
        }
        .time-travel {
            background: linear-gradient(to right, #1a237e, #4a148c);
            color: white;
            border-radius: 12px;
            padding: 16px;
            margin-top: 24px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .time-travel-title {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .time-travel-title i {
            margin-right: 8px;
        }
        .time-travel-desc {
            margin-bottom: 16px;
            opacity: 0.9;
            line-height: 1.5;
        }
        .time-travel-action {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .spirit-connection {
            display: flex;
            align-items: center;
            background-color: rgba(255,255,255,0.2);
            padding: 8px 12px;
            border-radius: 20px;
        }
        .spirit-avatar {
            width: 24px;
            height: 24px;
            border-radius: 12px;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="app-header" style="background-color: #9C27B0;">
        <div class="header-title">非遗文化</div>
        <div class="header-actions">
            <i class="fas fa-share-alt"></i>
        </div>
    </div>

    <div class="heritage-header">
        <div class="heritage-title">非物质文化遗产</div>
        <div class="heritage-subtitle">探索张家界的传统文化与技艺</div>
        
        <div class="heritage-search">
            <div class="heritage-search-icon">
                <i class="fas fa-search"></i>
            </div>
            <input type="text" placeholder="搜索非遗项目、传承人...">
        </div>
    </div>

    <div class="app-content">
        <div class="category-tabs">
            <div class="category-tab active">全部</div>
            <div class="category-tab">传统表演</div>
            <div class="category-tab">手工技艺</div>
            <div class="category-tab">传统节庆</div>
            <div class="category-tab">民间音乐</div>
            <div class="category-tab">传统饮食</div>
        </div>
        
        <div class="heritage-card">
            <div class="heritage-image">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Crect width='800' height='400' fill='%23673AB7'/%3E%3Ccircle cx='200' cy='200' r='150' fill='%23FFC107' fill-opacity='0.6'/%3E%3Ccircle cx='600' cy='200' r='150' fill='%23FFC107' fill-opacity='0.6'/%3E%3Cpath d='M400,100 L400,300 M300,200 L500,200' stroke='white' stroke-width='20' stroke-opacity='0.8'/%3E%3C/svg%3E" alt="土家族仗鼓舞">
                <div class="heritage-overlay">
                    <div class="heritage-name">土家族仗鼓舞</div>
                    <div class="heritage-type">国家级非物质文化遗产</div>
                </div>
            </div>
            <div class="heritage-content">
                <div class="heritage-description">
                    仗鼓舞是土家族古老的祭祀活动，由舞者一边敲击背负的小鼓，一边翩翩起舞。这种独特的表演形式已有上千年历史，展现了土家族的狩猎传统和勇武精神。
                </div>
                <div class="heritage-highlights">
                    <div class="heritage-highlight">传承千年</div>
                    <div class="heritage-highlight">热情奔放</div>
                    <div class="heritage-highlight">祭祀仪式</div>
                    <div class="heritage-highlight">团体舞蹈</div>
                </div>
                <div class="heritage-action">
                    <button class="virtual-tour">
                        <i class="fas fa-vr-cardboard"></i>
                        <span>虚拟体验</span>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="featured-section">
            <div class="section-title">
                <i class="fas fa-star"></i>
                <span>精选展示</span>
            </div>
            
            <div class="featured-scroll">
                <div class="featured-item">
                    <div class="featured-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23E1BEE7'/%3E%3Cpath d='M100,150 C100,100 300,100 300,150' stroke='%239C27B0' stroke-width='10' fill='none'/%3E%3Cpath d='M100,200 C100,250 300,250 300,200' stroke='%239C27B0' stroke-width='10' fill='none'/%3E%3C/svg%3E" alt="西兰卡普">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">西兰卡普</div>
                        <div class="featured-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>土家织锦博物馆</span>
                        </div>
                    </div>
                </div>
                <div class="featured-item">
                    <div class="featured-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23E1BEE7'/%3E%3Ccircle cx='200' cy='150' r='100' fill='%239C27B0' fill-opacity='0.5'/%3E%3Cpath d='M150,150 L250,150 M200,100 L200,200' stroke='white' stroke-width='10'/%3E%3C/svg%3E" alt="土家族摆手舞">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">土家族摆手舞</div>
                        <div class="featured-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>民族文化广场</span>
                        </div>
                    </div>
                </div>
                <div class="featured-item">
                    <div class="featured-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23E1BEE7'/%3E%3Cpath d='M100,200 L300,200 L300,250 L100,250 Z' fill='%239C27B0'/%3E%3Cpath d='M150,150 L250,150 L250,200 L150,200 Z' fill='%239C27B0'/%3E%3Cpath d='M180,100 L220,100 L220,150 L180,150 Z' fill='%239C27B0'/%3E%3C/svg%3E" alt="湘西赶年宴">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">湘西赶年宴</div>
                        <div class="featured-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>土家风情园</span>
                        </div>
                    </div>
                </div>
                <div class="featured-item">
                    <div class="featured-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23E1BEE7'/%3E%3Cpath d='M150,100 L250,100 L250,250 L150,250 Z' fill='%239C27B0'/%3E%3Ccircle cx='200' cy='150' r='30' fill='white'/%3E%3C/svg%3E" alt="毛古斯舞">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">毛古斯舞</div>
                        <div class="featured-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>民俗文化村</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="time-travel">
            <div class="time-travel-title">
                <i class="fas fa-history"></i>
                <span>时光回溯体验</span>
            </div>
            <div class="time-travel-desc">
                通过AR/VR技术，穿越时空感受土家族传统婚礼仪式的原貌，了解当地历史文化。
            </div>
            <div class="time-travel-action">
                <button class="btn btn-primary" style="background-color: transparent; border: 1px solid white;">
                    立即体验
                </button>
                <div class="spirit-connection">
                    <img class="spirit-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23FFC107'/%3E%3Cpath d='M30,30 L70,70 M70,30 L30,70' stroke='white' stroke-width='5'/%3E%3C/svg%3E" alt="焰灵">
                    <span>焰灵讲解</span>
                </div>
            </div>
        </div>
        
        <div class="artisan-section">
            <div class="section-title">
                <i class="fas fa-user-alt"></i>
                <span>非遗传承人</span>
            </div>
            
            <div class="artisan-item">
                <div class="artisan-avatar">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23E1BEE7'/%3E%3Ccircle cx='100' cy='80' r='30' fill='%23673AB7'/%3E%3Cpath d='M60,180 Q100,120 140,180' fill='%23673AB7'/%3E%3C/svg%3E" alt="李大妹">
                </div>
                <div class="artisan-info">
                    <div class="artisan-name">李大妹</div>
                    <div class="artisan-craft">西兰卡普织锦技艺传承人</div>
                    <div class="artisan-bio">
                        国家级非遗传承人，从事西兰卡普织造50余年，作品曾在国际展览中获奖。
                    </div>
                </div>
                <button class="mini-button">访谈</button>
            </div>
            
            <div class="artisan-item">
                <div class="artisan-avatar">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23E1BEE7'/%3E%3Ccircle cx='100' cy='80' r='30' fill='%23673AB7'/%3E%3Cpath d='M60,170 Q100,140 140,170' fill='%23673AB7'/%3E%3Cpath d='M80,60 L120,60' stroke='%23673AB7' stroke-width='8'/%3E%3C/svg%3E" alt="张洪福">
                </div>
                <div class="artisan-info">
                    <div class="artisan-name">张洪福</div>
                    <div class="artisan-craft">仗鼓舞传承人</div>
                    <div class="artisan-bio">
                        省级非遗传承人，自幼学习仗鼓舞技艺，现致力于创新传统表演形式。
                    </div>
                </div>
                <button class="mini-button">访谈</button>
            </div>
            
            <div class="artisan-item">
                <div class="artisan-avatar">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23E1BEE7'/%3E%3Ccircle cx='100' cy='80' r='30' fill='%23673AB7'/%3E%3Cpath d='M70,130 Q100,160 130,130' fill='%23673AB7'/%3E%3Cpath d='M60,180 L140,180' stroke='%23673AB7' stroke-width='8'/%3E%3C/svg%3E" alt="陈明德">
                </div>
                <div class="artisan-info">
                    <div class="artisan-name">陈明德</div>
                    <div class="artisan-craft">土家族传统工艺传承人</div>
                    <div class="artisan-bio">
                        擅长竹编、木雕等传统手工艺，作品以自然山水为主题，保留原生态美感。
                    </div>
                </div>
                <button class="mini-button">访谈</button>
            </div>
        </div>
    </div>

    <div class="bottom-nav">
        <div class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-map-marked-alt"></i>
            <span>地图</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-dragon"></i>
            <span>精灵</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-robot"></i>
            <span>导游</span>
        </div>
        <div class="nav-item active">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 